<template>
	<view>
		<view class="page_title">
			<NavBack></NavBack>
			<view class="page_name">基本资料</view>
			<view class="blank"></view>
		</view>

		<view class="banxin">
			<view class="information">
				<view class="item">
					<view class="label">姓名</view>
					<view class="info" @click="showAvatar">
						<view>{{userDetails.authentication.realName||'未实名'}}</view>
					</view>
				</view>
				<view class="item">
					<view class="label">性别</view>
					<view class="info" @click="showNickname">
						<view>{{userDetails.sex==0?'女':'男'}}</view>
					</view>
				</view>
				<view class="item">
					<view class="label">学历</view>
					<view class="info" @click="handleBase">
						<view>{{userDetails.education||'未认证'}}</view>
					</view>
				</view>
				<view class="item">
					<view class="label">家乡</view>
					<view class="info" @click="handleBase">
						<view>{{userDetails.education||'未认证'}}</view>
					</view>
				</view>
				<view class="item">
					<view class="label">家乡</view>
					<view class="info" @click="handlePopup('家乡')">
						<view>
							{{userDetails.homeTown}}
						</view>
						<image class="next" src="/static/img/open.png" mode="" />
					</view>
				</view>
				<view class="item">
					<view class="label">职业</view>
					<view class="info" @click="handlePopup('职业')">
						<view>{{userDetails.profession}}</view>
						<image class="next" src="/static/img/open.png" mode="" />
					</view>
				</view>
				<view class="item">
					<view class="label">工作地区</view>
					<view class="info" @click="handlePopup('工作地区')">
						<view>{{userDetails.workingArea}}</view>
						<image class="next" src="/static/img/open.png" mode="" />
					</view>
				</view>
				<view class="item">
					<view class="label">身高</view>
					<view class="info" @click="handlePopup('身高')">
						<view>{{userDetails.height}}cm</view>
						<image class="next" src="/static/img/open.png" mode="" />
					</view>
				</view>
				<view class="item">
					<view class="label">体重</view>
					<view class="info" @click="handlePopup('体重')">
						<view>{{userDetails.weight}}kg</view>
						<image class="next" src="/static/img/open.png" mode="" />
					</view>
				</view>
				<view class="item">
					<view class="label">生日</view>
					<view class="info" @click="handlePopup('生日')">
						<view>{{userDetails.birthday}}</view>
						<image class="next" src="/static/img/open.png" mode="" />
					</view>
				</view>
				<view class="item">
					<view class="label">购车状况</view>
					<view class="info" @click="handlePopup('购车状况')">
						<view>{{userDetails.carStatus}}</view>
						<image class="next" src="/static/img/open.png" mode="" />
					</view>
				</view>

				<view class="item">
					<view class="label">购房状况</view>
					<view class="info" @click="handlePopup('购房状况')">
						<view>{{userDetails.houseStatus}}</view>
						<image class="next" src="/static/img/open.png" mode="" />
					</view>
				</view>
			</view>
		</view>

		<!-- 修改用户信息弹窗 -->
		<u-popup closeable class="info-popup" :show="showPopup" mode='bottom' @close="closePopup">
			<view class="my-popup">
				<view class="income_title">
					{{popupType}}
				</view>
				<picker-view v-if="popupType=='家乡' || popupType=='工作地区'" @change="changePosition" :value="positionValue"
					class="my-picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in provinceList" :key="index">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in cityList" :key="index">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in areaList" :key="index">{{item}}</view>
					</picker-view-column>
				</picker-view>

<!-- 				<picker-view v-if="popupType=='职业'" @change="changeCareer" :value="careerValue" class="my-picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in careerList" :key="index">{{item}}</view>
					</picker-view-column>
				</picker-view> -->

				<picker-view  v-if="popupType=='职业'" @change="changeCareer" :value="careerValue" class="my-picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in careerList1" :key="index">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in careerList2" :key="index">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in careerList3" :key="index">{{item}}</view>
					</picker-view-column>
				</picker-view>

				<picker-view v-if="popupType=='身高'" @change="changeHeight" :value="heightValue" class="my-picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in heightList" :key="index">{{item}} cm</view>
					</picker-view-column>
				</picker-view>

				<picker-view v-if="popupType=='体重'" @change="changeWeight" :value="weightValue" class="my-picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in weightList" :key="index">{{item}} kg</view>
					</picker-view-column>
				</picker-view>

				<picker-view v-if="popupType=='生日'" @change="changeBirthday" :value="birthdayValue"
					class="my-picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in yearList" :key="index">{{item}} 年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in monthList" :key="index">{{item}} 月</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in dayList" :key="index">{{item}} 日</view>
					</picker-view-column>
				</picker-view>

				<picker-view v-if="popupType=='购车状况'" @change="changeCar" :value="carValue" class="my-picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in carList" :key="index">{{item}}</view>
					</picker-view-column>
				</picker-view>

				<picker-view v-if="popupType=='购房状况'" @change="changeHouse" :value="houseValue" class="my-picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in houseList" :key="index">{{item}}</view>
					</picker-view-column>
				</picker-view>
				<div class="confirm">
					<button type="primary" @click="confirmPopup">确认</button>
				</div>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import request from '@/utils/request.js'
	import NavBack from '@/components/NavBack.vue'
	import careerList from '@/utils/career.js'

	export default {
		components: {
			NavBack
		},
		data() {
			return {
				userDetails: {
					authentication: {},
					spouse: {},
				},
				showPopup: false,
				popupType: '',
				provinceList: [],
				cityList: [],
				areaList: [],
				currentProvince: [],
				provinceName: '',
				cityName: '',
				areaName: '',
				heightList: [],
				height: '',
				weightList: [],
				weight: '',
				yearList: [],
				monthList: [],
				dayList: [],
				currentYear: '',
				currentMonth: '',
				currentDay: '',
				carList: ['暂无购车', '已购车-中等型', '已购车-经济型', '已购车-豪华型', '单位购车'],
				car: '',
				houseList: ['租房', '已购房', '需要时购置', '在单位宿舍', '单位购房'],
				house: '',
				districts: [],
				positionValue: [21, 10, 0],
				birthdayValue: [20, 0, 0],
				weightValue: [40],
				heightValue: [40],
				carValue: [2],
				houseValue: [2],
				career: '',
				careerList1: [],
				careerList2: [],
				careerList3: [],
				currentCareer1:'',
				currentCareer2:'',
				currentCareer3:'',
				careerValue: [2,0,0],
				currentCareer: {},
				careerList: ['民营企业', '国有企业', '事业单位', '公务员', '上市公司', '个体户', '其他'],
			};
		},
		onLoad() {
			this.initCareerList()
			this.inniDistricts(),
				this.initInfo(),
				this.inniHeight(),
				this.inniWeight(),
				this.inniDateList(),
				this.career = this.careerList[2]
			this.car = this.carList[2],
				this.house = this.houseList[2]
		},
		methods: {
			initCareerList(){
				this.currentCareer = careerList[2]
				this.careerList1 = careerList.map(item => {
						return item.name
					})
				this.careerList2 = this.currentCareer.children?.map(item => {
						return item.name
					})
				this.careerList3 = this.currentCareer.children && this.currentCareer.children[0].children?.map(item => {
						return item.name
					})
					this.provinceList = this.districts.map((element) => {
							return element.name
						})
				this.currentCareer1 = this.careerList1[2]
				this.currentCareer2 = this.careerList2&&this.careerList2[0]
				this.currentCareer3 = this.careerList3&&this.careerList3[0]
				console.log(this.careerList1,this.careerList2,this.careerList3);
				console.log(this.currentCareer1,this.currentCareer2,this.currentCareer3);
			},
			changeCareer(e) {
				const val = e.detail.value
				this.currentCareer = careerList[val[0]]
				if (this.careerValue[0] != val[0]) {
					this.careerValue[0] = val[0]
					// this.careerValue[1] = 0
					this.careerList2 = this.currentCareer.children?.map((element) => {
						return element.name
					})
					this.careerList3 = this.currentCareer.children&&this.currentCareer.children[0].children?.map((element) => {
							return element.name
						}),
					this.currentCareer1 = this.currentCareer.name
					this.currentCareer2 = this.careerList2&&this.careerList2[val[1]]
					this.currentCareer3 = this.careerList3&&this.careerList3[val[2]]
				} else if (this.careerValue[1] != val[1]) {
					this.careerValue[1] = val[1]
					// this.careerValue[2] = 0
					this.careerList3 =this.currentCareer.children&&this.currentCareer.children[val[1]].children?.map((element) => {
							return element.name
						}),
						this.currentCareer2 = this.careerList2&&this.careerList2[val[1]]
						this.currentCareer3 = this.careerList3&&this.careerList3[val[2]]
				} else if (this.careerValue[2] != val[2]) {
					this.careerValue[2] = val[2]
					this.currentCareer3 = this.careerList3&&this.careerList3[val[2]]
				}
				// let current = event.detail.value[0]
				// console.log(current, 'changecareer');
				// this.careerValue[0] = current
				// this.career = this.careerList[current]
			},
			inniDistricts() {
				this.districts = getApp().globalData.districts
				console.log(this.districts, 'this.districts');
				this.provinceList = this.districts.map((element) => {
						return element.name
					}),
					this.cityList = this.districts[21].districts.map((element) => {
						return element.name
					}),
					this.areaList = this.districts[21].districts[10].districts.map((element) => {
						return element.name
					}),
					this.provinceName = this.provinceList[21]
				this.cityName = this.cityList[10]
				this.areaName = this.areaList[0]
			},

			inniDateList() {
				const currentTime = new Date();
				const currentYear = currentTime.getFullYear();
				for (let i = currentYear; i > currentYear - 100; i--) {
					this.yearList.push(i)
				}
				for (let i = 12; i > 0; i--) {
					this.monthList.push(i)
				}
				this.getDaysInMonth(Number(this.currentYear), Number(this.currentMonth))
				this.currentYear = this.yearList[20]
				this.currentMonth = this.monthList[0]
				this.currentDay = this.dayList[0]
			},
			changeYear(event) {
				console.log(event.detail.value, 'changeYear');
				this.currentYear = event.detail.value
				this.getDaysInMonth(Number(this.currentYear), Number(this.currentMonth))
			},
			changeMonth(event) {
				console.log(event.detail.value, 'changeMonth');
				this.currentMonth = event.detail.value
				// let daysInMonth = new Date(Number(this.currentYear), Number(this.currentMonth), 0).getDate();
				this.getDaysInMonth(Number(this.currentYear), Number(this.currentMonth))
			},
			getDaysInMonth(year, month) {
				let daysInMonth = new Date(year, month, 0).getDate();
				this.dayList = []
				for (let i = daysInMonth; i > 0; i--) {
					this.dayList.push(i)
				}
			},
			changeDay(event) {
				console.log(event.detail.value, 'changeDay');
				this.currentDay = event.detail.value
			},

			initInfo() {
				let that = this
				request(`/employee/${uni.getStorageSync('id')}`).then((res) => {
					// console.log(res.data.data,'authentication');
					let userDetails = res.data.data
					that.userDetails = userDetails
					console.log(this.userDetails, 'userDetails');
				})
			},
			handlePopup(type) {
				this.showPopup = true
				this.popupType = type
				console.log(this.popupType, 'this.popupType');
			},
			closePopup() {
				this.showPopup = false
			},
			changeBirthday(e) {
				const val = e.detail.value
				console.log(val, 'changeBirthday');
				if (this.birthdayValue[0] != val[0]) {
					this.birthdayValue[0] = val[0]
					// this.birthdayValue[1] = 0
					this.currentYear = this.yearList[val[0]]
					this.currentMonth = this.monthList[val[1]]
					this.currentDay = this.dayList[val[2]]
				} else if (this.birthdayValue[1] != val[1]) {
					this.birthdayValue[1] = val[1]
					// this.birthdayValue[2] = 0
					this.currentMonth = this.monthList[val[1]]
					this.getDaysInMonth(Number(this.currentYear), Number(this.currentMonth))
					this.currentDay = this.dayList[val[2]]
				} else if (this.birthdayValue[2] != val[2]) {
					this.currentDay = this.dayList[val[2]]
				}
			},
			changePosition(e) {
				const val = e.detail.value
				console.log(val, this.districts[val[0]], 'changePosition');
				let provinceIndex = val[0]
				let cityIndex = val[1]
				let areaIndex = val[2]
				this.currentProvince = this.districts[val[0]]
				console.log(this.currentProvince, 'this.positionValue');
				if (this.positionValue[0] != val[0]) {
					this.positionValue[0] = val[0]
					// this.positionValue[1] = 0
					this.cityList = this.currentProvince.districts.map((element) => {
						return element.name
					})
					this.areaList = this.currentProvince.districts[0].districts.map((element) => {
							return element.name
						}),
						this.provinceName = this.currentProvince.name
					this.cityName = this.cityList[cityIndex]
					this.areaName = this.areaList[areaIndex]
				} else if (this.positionValue[1] != val[1]) {
					this.positionValue[1] = val[1]
					// this.positionValue[2] = 0
					this.areaList = this.currentProvince.districts[cityIndex].districts.map((element) => {
							return element.name
						}),
						this.cityName = this.cityList[cityIndex]
					this.areaName = this.areaList[areaIndex]
				} else if (this.positionValue[2] != val[2]) {
					this.positionValue[2] = val[2]
					this.areaName = this.areaList[areaIndex]
				}
				console.log(this.currentProvince, 'this.currentProvince');
			},
			
			inniWeight() {
				for (let i = 110; i > 30; i--) {
					this.weightList.push(i)
				}
				this.weight = this.weightList[40]
			},
			changeWeight(event) {
				let current = event.detail.value[0]
				console.log(current, 'changeWeight');
				this.weightValue[0] = current
				this.weight = this.weightList[current]
			},
			inniHeight() {
				for (let i = 210; i > 140; i--) {
					this.heightList.push(i)
				}
				this.height = this.heightList[40]
			},
			changeHeight(event) {
				let current = event.detail.value[0]
				console.log(current, 'changeHeight');
				this.heightValue[0] = current
				this.height = this.heightList[current]
			},
			changeHouse(event) {
				let current = event.detail.value[0]
				console.log(current, 'changeHouse');
				this.houseValue[0] = current
				this.house = this.houseList[current]
			},
			changeCar(event) {
				let current = event.detail.value[0]
				console.log(current, 'changeCar');
				this.carValue[0] = current
				this.car = this.carList[current]
			},
			changeInfo(key, value) {
				request(`/employee/insertBaseInfo`, {
					method: 'POST',
					data: {
						[key]: value
					}
				}).then((res) => {
					if (res.data.code == 1) {
						this.initInfo()
						uni.showToast({
							title: '修改成功',
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			confirmPopup() {
				if (this.popupType == '家乡') {
					let homeTown = `${this.provinceName} ${this.cityName} ${this.areaName}`
					console.log(homeTown, 'homeTown');
					this.changeInfo('homeTown', homeTown)
				} else if (this.popupType == '职业') {
					let profession = `${this.currentCareer1} ${this.currentCareer2||''} ${this.currentCareer3||''}`
					this.changeInfo('profession', profession)
				} else if (this.popupType == '工作地区') {
					let workingArea = `${this.provinceName} ${this.cityName} ${this.areaName}`
					this.changeInfo('workingArea', workingArea)
				} else if (this.popupType == '身高') {
					this.changeInfo('height', this.height)
				} else if (this.popupType == '体重') {
					this.changeInfo('weight', this.weight)
				} else if (this.popupType == '生日') {
					let birth = `${this.currentYear}-${this.currentMonth}-${this.currentDay}`
					this.changeInfo('birthday', birth)
				} else if (this.popupType == '购车状况') {
					this.changeInfo('carStatus', this.car)
				} else if (this.popupType == '购房状况') {
					this.changeInfo('houseStatus', this.house)
				}
				this.closePopup()
			},
		}
	}
</script>

<style lang="scss">
	.information {
		border-radius: 40rpx;
		// margin-top: 30rpx;
		padding: 30rpx;
		background-color: rgba(255, 255, 255, 1);

		.item {
			display: flex;
			flex: 1;
			margin-bottom: 40rpx;
			align-items: center;
			justify-content: space-between;

			.label {
				font-size: 28rpx;
				color: rgba(51, 51, 51, 1);
				line-height: 40rpx;
			}

			.info {
				display: flex;
				flex: 1;
				justify-content: flex-end;
				color: rgba(166, 166, 166, 1);
				line-height: 40rpx;
				align-items: center;

				view {
					font-size: 28rpx;
					max-width: 350rpx;
					white-space: nowrap;
					/* 确保文本在一行内显示 */
					overflow: hidden;
					/* 隐藏溢出的内容 */
					text-overflow: ellipsis;
				}

				.avatar {
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
				}

				.next {
					width: 24rpx;
					height: 24rpx;
					margin-left: 10rpx;
				}
			}
		}

		.loginOut {
			color: rgba(107, 107, 255, 1);
			background-color: rgba(235, 235, 255, 1) !important;
		}
	}

	.info-popup /deep/ .u-popup__content {
		// height: 500rpx !important;
		z-index: 999;

		.my-popup {
			height: 500rpx;
		}

		.income_title {
			font-size: 36rpx;
			font-weight: 500;
			text-align: center;
			margin-top: 30rpx;
		}

		button {
			width: 65%;
			position: absolute;
			bottom: 30rpx;
			left: 0;
			right: 0;
			background-color: rgb(117, 38, 38);
		}
	}


	.my-picker-view {
		width: 100%;
		height: 300rpx;
		margin-top: 20rpx;
		// background-color: #d7ff43;
	}

	.item {
		text-align: center;
		line-height: 34px;
	}
</style>